<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>白色背景炫酷登录界面</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36BFFA',
            dark: '#1D2939',
            light: '#F9FAFB'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .backdrop-blur-xl {
        backdrop-filter: blur(24px);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-gradient {
        background-size: 200% 200%;
        animation: gradientMove 8s ease infinite;
      }
      @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
      }
      @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
    }
  </style>
</head>
<body class="font-inter bg-white min-h-screen flex items-center justify-center p-4 md:p-0 overflow-x-hidden">
  <!-- 装饰元素 -->
  <div class="fixed top-1/4 -left-20 w-64 h-64 bg-blue-100 rounded-full blur-3xl animate-float"></div>
  <div class="fixed bottom-1/3 -right-20 w-80 h-80 bg-primary/10 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div>
  
  <!-- 登录卡片 -->
  <div class="relative z-10 w-full max-w-md md:max-w-lg bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-primary/10">
    <!-- 卡片顶部装饰条 -->
    <div class="h-1 w-full bg-gradient-to-r from-primary to-secondary"></div>
    
    <div class="p-6 md:p-8">
      <!-- 标题区域 -->
      <div class="text-center mb-8">
        <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-dark text-shadow mb-2">欢迎您</h1>
        <p class="text-gray-500 text-[clamp(0.9rem,2vw,1rem)]">请使用手机号和密码登录</p>
      </div>
      
      <!-- 登录表单 -->
      <form id="loginForm" class="space-y-5">
        <!-- 手机号输入 -->
        <div class="relative group">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-gray-400 transition-all duration-300 group-focus-within:text-primary">
            <i class="fa fa-phone text-lg"></i>
          </div>
          <input 
            type="tel" 
            id="phone" 
            placeholder="请输入手机号" 
            class="w-full pl-12 pr-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-dark placeholder-gray-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
            required
            pattern="1[3-9]\d{9}"
          >
          <div class="hidden absolute right-4 top-1/2 -translate-y-1/2 text-green-500" id="phoneValid">
            <i class="fa fa-check-circle"></i>
          </div>
          <div class="hidden absolute right-4 top-1/2 -translate-y-1/2 text-red-500" id="phoneInvalid">
            <i class="fa fa-exclamation-circle"></i>
          </div>
        </div>
        
        <!-- 密码输入 -->
        <div class="relative group">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-gray-400 transition-all duration-300 group-focus-within:text-primary">
            <i class="fa fa-lock text-lg"></i>
          </div>
          <input 
            type="password" 
            id="password" 
            placeholder="请输入密码" 
            class="w-full pl-12 pr-12 py-3 rounded-xl bg-gray-50 border border-gray-200 text-dark placeholder-gray-400 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
            required
            minlength="6"
          >
          <button 
            type="button" 
            id="togglePassword" 
            class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-400 hover:text-gray-600 transition-colors duration-300"
          >
            <i class="fa fa-eye-slash"></i>
          </button>
        </div>
        <!-- 登录按钮 -->
        <button 
          type="submit" 
          class="w-full py-3.5 rounded-xl bg-gradient-to-r from-primary to-secondary text-white font-medium text-lg shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2"
        >
          登录
        </button>
      </form>
    </div>
  </div>

  <script>
    // 表单验证和交互逻辑
    document.addEventListener('DOMContentLoaded', function() {
      const loginForm = document.getElementById('loginForm');
      const phoneInput = document.getElementById('phone');
      const passwordInput = document.getElementById('password');
      const togglePassword = document.getElementById('togglePassword');
      const phoneValid = document.getElementById('phoneValid');
      const phoneInvalid = document.getElementById('phoneInvalid');
      
      // 手机号验证
      phoneInput.addEventListener('input', function() {
        const phonePattern = /^1[3-9]\d{9}$/;
        if (this.value.length > 0) {
          if (phonePattern.test(this.value)) {
            phoneValid.classList.remove('hidden');
            phoneInvalid.classList.add('hidden');
            this.classList.remove('border-red-400');
            this.classList.add('border-green-400');
          } else {
            phoneValid.classList.add('hidden');
            phoneInvalid.classList.remove('hidden');
            this.classList.remove('border-green-400');
            this.classList.add('border-red-400');
          }
        } else {
          phoneValid.classList.add('hidden');
          phoneInvalid.classList.add('hidden');
          this.classList.remove('border-red-400', 'border-green-400');
        }
      });
      
      // 密码显示/隐藏切换
      togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        
        // 切换图标
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
      });
      
      // 表单提交处理
      loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 验证手机号格式
        const phonePattern = /^1[3-9]\d{9}$/;
        if (!phonePattern.test(phoneInput.value)) {
          phoneInput.classList.add('border-red-400');
          phoneInvalid.classList.remove('hidden');
          return;
        }
        
        // 验证密码长度
        if (passwordInput.value.length < 6) {
          passwordInput.classList.add('border-red-400');
          return;
        }
        
        // 显示登录加载效果
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';
        
        // 发送登录请求
        const formData = new FormData();
        formData.append('phone', phoneInput.value);
        formData.append('password', passwordInput.value);
        
        fetch('login_user.php', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log(data)
          if (data.success) {
            // 登录成功
            submitBtn.innerHTML = '<i class="fa fa-check mr-2"></i> 登录成功';
            submitBtn.classList.add('bg-green-500');
            
            // 显示成功消息
            setTimeout(() => {
              window.location.href = data.redirect;
            }, 1000);
          } else {
            // 登录失败
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
            alert(data.message);
          }
        })
        .catch(error => {
          console.error('登录失败:', error);
          submitBtn.innerHTML = originalText;
          submitBtn.disabled = false;
          alert('登录失败，请重试');
        });
      });
      
      // 输入框获得/失去焦点效果
      const inputs = document.querySelectorAll('input');
      inputs.forEach(input => {
        input.addEventListener('focus', function() {
          this.parentElement.classList.add('scale-[1.02]');
          this.parentElement.style.transition = 'transform 0.3s ease';
        });
        
        input.addEventListener('blur', function() {
          this.parentElement.classList.remove('scale-[1.02]');
        });
      });
    });
  </script>
</body>
</html>
    